<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
            text-decoration: line-through;
        }

        /* .show {
            display: list-item;
        } */

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" name="" id="">
        <button id="sure">确定</button>
    </div>
    <ul>
        <li class="active">洗衣服</li>
        <li>写作业</li>
        <li>吃饭</li>
        <li>看电影</li>
        <li>看书</li>
    </ul>
    <div>
        <button id="all">全部</button>
        <button id="finished">已完成</button>
        <button id="unfinished">未完成</button>
    </div>

    <script>
        let input = document.getElementsByTagName("input")[0];
        let ul = document.getElementsByTagName("ul")[0];
        let li = document.getElementsByTagName("li");
        document.body.onclick = function () {
            // 1.点击确定
            if (event.target.id === "sure") {
                let word = input.value;
                if (word) {
                    ul.innerHTML += `<li>${word}</li>`;

                } else {
                    alert("请输入内容！");
                }
            }
            // 2.点击代办事项
            if (event.target.localName === "li") {
                event.target.classList.toggle("active");
            }
            // 3.全部
            if (event.target.id === "all") {
                for (let i = 0; i < li.length; i++) {
                    li[i].classList.remove("hide");
                }
            }

            // 4.已完成
            if (event.target.id === "finished") {
                for (let i = 0; i < li.length; i++) {
                    if (li[i].classList.contains("active")) {
                        li[i].classList.remove("hide");
                    } else {
                        li[i].classList.add("hide");

                    }
                }
            }

            // 5.未完成
            if (event.target.id === "unfinished") {
                for (let i = 0; i < li.length; i++) {
                    if (li[i].classList.contains("active")) {
                        li[i].classList.add("hide");
                    } else {
                        li[i].classList.remove("hide");

                    }
                }
            }
        }
    </script>
</body>

</html>